<template>
  <div class="box">
    <el-card class="box-card">
      <el-button class="addIcon" size="small" style="float: right;" type="success" @click="addUserDialogVisible = true">
        添加标签
        <i class="el-icon-edit"></i>
      </el-button>
       <!-- 表格 -->
      <template>
        <el-table
        :data="menuslist"
        stripe
         :tree-props="{children: 'childs'}">
        style="width: 100%">
          <el-table-column
            prop="title"
            label="标题"
            >
          </el-table-column>
          <el-table-column
            prop="code"
            label="权限代码"
            width="900">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            width="180"
            >
             <!-- 编辑 -->
          <el-button class="editIcon" type="primary" circle plain icon="el-icon-edit" size="mini"></el-button>
          <!-- 删除 -->
          <el-button type="danger" circle plain icon="el-icon-delete" size="mini"></el-button>
          </el-table-column>
        </el-table>
      </template>
    </el-card>
    <!-- 添加创建菜单对话框 -->
    <el-dialog
      title="添加标签"
      :visible.sync="addUserDialogVisible"
      width="50%">
      <el-form ref="addUserForm" label-width="130px">
        <el-form-item label="权限点名称">
          <el-radio label="1">菜单</el-radio>
          <el-radio label="2">权限点</el-radio>
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select placeholder="请选择">
            <!-- <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option> -->
            <el-tree :data="menuslist" :props="treeProps" @node-click="handleNodeClick"></el-tree>
          </el-select>
        </el-form-item>
        <el-form-item prop="email" label="权限代码">
          <el-input></el-input>
        </el-form-item>
        <el-form-item prop="mobile" label="权限标题">
          <el-input></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addUserDialogVisible = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list } from '@/api/base/menus.js'
export default {
  data () {
    return {
      menuslist: [],
      addUserDialogVisible: false,
      treeProps: {
      }
    }
  },

  created () {
    this.getMenus()
  },

  methods: {
    // 获取菜单列表
    async getMenus () {
      const { data: res } = await list()
      this.menuslist = res
      // console.log(res)
      console.log(this.menuslist)
    }
    // // 添加菜单
    // async addMenus () {
    //   const { data: res } = await add()
    //   this.addmenuslist = res
    //   // console.log(res)
    //   console.log(this.menuslist)
    // }
  }
}
</script>

<style scoped lang='less'>
.box {
  margin-top: 10px;

  .addIcon {
    margin-bottom: 20px;
  }
}
</style>
